<template>
    <div id="login">
        <div class="main_left">
            <el-image class="ml_logo" :src="require('@/assets/login_bg_logo_yellow.png')"></el-image>
            <el-image class="ml_img" :src="require('@/assets/login_bg_decorate_yellow.png')"></el-image>
            <el-image class="ml_bg" :src="require('@/assets/login_bg_yellow.png')"></el-image>
        </div>
        <div class="main_right">
            <el-image class="footer_bg" :src="require('@/assets/login_bg2_yellow.png')"></el-image>
            <div class="login_form">
                <el-form :model="loginForm" :rules="rules" ref="loginForm">
                    <h1>您好，欢迎登录！</h1>
                    <el-form-item label="" prop="username">
                        <i class="icon el-icon-user"></i> 
                        <el-input v-model="loginForm.username" clearable placeholder="请输入登录账号"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <i class="icon el-icon-lock"></i>
                        <el-input v-model="loginForm.password" show-password placeholder="请输入登录密码"></el-input>
                    </el-form-item>
                    <div class="login_btn">
                        <el-button @click="submitForm('loginForm')" type="primary">登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                username: 'admin',
                password: '123456'
            },
            rules: {
                username: [
                    { required: true, message: '请输入登录账号' }
                ],
                password: [
                    { required: true, message: '请输入登录密码' }
                ]
            }
        }
    },
    mounted () {
        //回车提交
        document.addEventListener('keydown', this.enterFun)
    },
    beforeDestroy() {
        //内存释放 防止内存泄露
        document.removeEventListener('keydown', this.enterFun)
    },
    methods: {
        //回车方法
        enterFun(e) {
            if(e.code.toLowerCase() === 'enter'){
                this.submitForm('loginForm')
            }
        },
        //表单提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //模拟登陆
                    if(this.loginForm.username == 'admin' && this.loginForm.password == '123456'){
                        this.$message({
                            message: '欢迎登陆！',
                            type: 'success'
                        })

                        localStorage.setItem('username', this.loginForm.username)
                        this.$router.push('/index')
                    }else{
                        this.$message.error('账号密码错误，默认账号：admin，密码：123456')
                    }
                } else {
                    this.$message.error('请输入登录信息！')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
#login{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .main_left{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 34%;

        .ml_logo{
            left: 8%;
            top: 4%;
            position: absolute;
            width: 27%;
            z-index: 2;
        }

        .ml_img{
            position: absolute;
            left: 50%;
            bottom: 20%;
            width: 60%;
            z-index: 2;
            transform: translateX(-50%);
        }

        .ml_bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }

    .main_right{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 66%;

        .footer_bg{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: -1;
        }

        .login_form{
            width: 340px;
            height: 440px;
            margin: auto;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            h1{
                text-indent: 6px;
                font-size: 25px;
                line-height: 25px;
                border-left: 2px solid #C7CACF;
                color: #4A4A4A;
                margin-bottom: 50px;
            }

            .el-form-item{
                position: relative;

                .icon{
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 2;
                    font-size: 20px;
                    display: flex;
                    width: 46px;
                    height: 46px;
                    align-items: center;
                    justify-content: center;
                    color: #909399;
                }

                ::v-deep .el-input__inner{
                    height: 46px;
                    line-height: 46px;
                    padding-left: 46px;
                    border-radius: 2px;
                    border: 1px solid #e6e6e6;

                    &:focus{
                        border-color: #FBBF00 !important;
                    }
                }
            }

            .login_btn{
                padding-top: 11px;

                .el-button{
                    display: block;
                    width: 100%;
                    border-radius: 2px;
                    padding: 14.5px 20px;
                    letter-spacing: 3px;
                    color: #303030;
                    background-color: #FBBF00;
                    border-color: #FBBF00;
                }
            }
        }
    }
}
</style>